<script setup>
import { onMounted, ref, watch } from 'vue' // 引入 Vue 3 相关的模块
import axios from 'axios';
let press = ref(0.1);
// let temp = ref(0.1)
let flag = ref(0)

const xImageUrl = ref(null);
const zImageUrl = ref(null);
const baseUrl1 = 'http://115.24.173.26:8002/DigitalTwinPic/neiya/pictures/x_stress_plots/';
const baseUrl2 = 'http://115.24.173.26:8002/DigitalTwinPic/neiya/pictures/z_stress_plots/';
const stuNo = sessionStorage.getItem("stuNo").replace(/"/g, "");
console.log(stuNo);
//计算图片名

const compute =()=>{
  var data1 = new FormData();
    data1.append('stress', press.value);
    console.log("press.value:",press.value);
    var config1 = {
        method: 'post',
        url: '/api/neiya/stress',
        headers: {
            'Content-Type': 'multipart/form-data; boundary=--------------------------594570228206462642755386',
        },
        data : data1
    };
    console.log("data1:",data1)
  axios(config1)
        .then(function (response) {
          console.log("计算数据：",(response.data));
        })
        .catch(function (error) {
          console.log(error);
        });
    }

    //实时数据请求
    const compute1 =()=>{
      var data = new FormData();
      data.append('usr', 'HBGYDX');
      data.append('pwd', '123456');
      data.append('id', '628');
      var config = {
        method: 'post',
        url: '/cgi/data.php',
        headers: {
          'Content-Type': 'multipart/form-data; boundary=--------------------------658559184002131110438280',
        },
        data : data
      };
      axios(config)
          .then(function (response) {
            try {
              press.value=Number(response.data.data[0].d1).toFixed(1).toString();
            } catch (e) {
              press.value=response.data.data[0].d1;
            }
            //  console.log(press);
          })
          .catch(function (error) {
            console.log(error);
          });

    }

// 发起 GET 请求获取图像
const xpicture =()=>{
    axios.get('/api/neiya/xpicture')
            .then((response) => {
              // 处理响应数据
              console.log("X图像实时数据",(response.data.data))
              if (response.data.code === 1) {
                xImageUrl.value= baseUrl1 + response.data.data;
                console.log("xImageUrl.value:",xImageUrl.value);
            } else {
              alert(response.data.msg);
            }
            })
            .catch((error) => {
              console.error('获取图像失败', error);
            });
      }
const zpicture =()=>{
    axios.get('/api/neiya/zpicture')
            .then((response) => {
              // 处理响应数据
              console.log("Z图像实时数据",(response.data.data))
              if (response.data.code === 1) {
                zImageUrl.value= baseUrl2 + response.data.data;
                console.log("zImageUrl.value:",zImageUrl.value);
            } else {
              alert(response.data.msg);
            }

            })
            .catch((error) => {
              console.error('获取图像失败', error);
            });
    }

compute();
xpicture();
zpicture();
const startIp = ()=>{
  axios.post('/api/student/stuStartNeiyaExp', { stuNo: stuNo })
      .then((response) => {
        // 处理响应数据
        if (response.data.code === 1) {
          // console.log(response.data);
          alert('请开始实验');
          flag.value = 1
        } else {
          alert(response.data.msg);
        }
      })
      .catch((error) => {
        console.error('开启实验失败', error);
      });
}



/*
watch(flag, async (newValue, oldValue) => {
  if (newValue === 1) {
    await compute1();
    xpicture();
    zpicture();
  } else {
    await compute();
    xpicture();
    zpicture();
  }
});
*/

const downloadFile = async ()=>{
   await axios.get('/api/neiya/data')
        .then((response) => {
          // 处理响应数据
    const blob = new Blob([response.data], { type: response.headers['content-type'] });
      // 发起下载文件请求
      const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
    // 创建一个 <a> 元素


    // 设置下载属性和文件名
    a.download = '内压实验数据.zip';

    // 模拟点击 <a> 元素
    a.click();
    })
    .catch((error) => {
      console.error('下载实验数据失败', error);
    });
}

const getRandomPress = () => {
  if (!flag.value) {
    press.value = Number((Number(press.value) + 0.1).toFixed(2));
    if (Math.abs(press.value - 1) < 0.000001) {
      press.value = 0.1;
    }
  } else {
    compute1();
    console.log("press.value:",press.value);
  }
};
setInterval(getRandomPress, 5000);

if(!flag.value){

watch(press, async (newValue, oldValue) => {
  // 执行compute()函数
  await compute();

  // 执行xpicture()函数
  xpicture();

  // 执行zpicture()函数
  zpicture();

  console.log('press值变化了，新值为：', newValue, '旧值为：', oldValue);
});
}
else
{
  compute1();
  xpicture();
  zpicture();
  watch(press, async (newValue, oldValue) => {
    // 执行compute()函数
    await compute1();

    // 执行xpicture()函数
    xpicture();

    // 执行zpicture()函数
    zpicture();

    console.log('press值变化了，新值为：', newValue, '旧值为：', oldValue);
  });
}

/*
watch(flag, async (newValue, oldValue) => {
  if (newValue === 1) {
    await compute1();
    watch(press, async (newValue, oldValue) => {
      console.log('press值变化了，新值为：', newValue, '旧值为：', oldValue);
      xpicture();
      zpicture();
    });
  } else {
    await compute();
    watch(press, async (newValue, oldValue) => {
      console.log('press值变化了，新值为：', newValue, '旧值为：', oldValue);
      xpicture();
      zpicture();
    });
  }
});*/




/**
 * #1 #2
 * 实验状态
 * @type {boolean}
 */
let expStatus = ref(false);

onMounted(() => {
  // 设置定时器，检测实验状态
  setInterval(() => {
    if (!expStatus.value){
      axios.get('/api/student/getNeiyaStatus?stuNo=' + stuNo).then((response) => {
        // 当状态已开始时，更新引用变量
        if (response.data.data === true) {
          expStatus.value = true;
        }
      });
    }
  }, 5000)
});


</script>
<template>
    <div class="page1">
      <div class="left-vedio">
        <div class="page-vedio flex-base-page">
    <div class="first-vedio flex-base-vedio">
        <div class="first-vedio-left">
          <div class="block text-center" m="t-4">
            <span class="demonstration">实验步骤展示</span>
            <el-carousel trigger="click" height="250px" wight="330px">
              <el-carousel-item v-for="item in 5" :key="item">
                <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                <img :src="'http://115.24.173.26:8002/DigitalTwinPic/step/neiya/' + item + '.jpg'" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
    </div>
    <div class="pic1 flex-base">
        <div class="pic1-left">
          <img :src="xImageUrl" class="image">
        </div>
        <div class="pic1-right flex-title">
          X方向应力云图
        </div>
    </div>
    <div class="pic2 flex-base">
        <div class="pic2-left">
          <img :src="zImageUrl" class="image">
        </div>
        <div class="pic2-right flex-title">
            Z方向应力云图
        </div>
    </div>
</div>
      </div>
      <div class="right-control">
        <div class="box-container">
            <div class="righttop">
                <div class="boxtop">
                    <div class="boxtop1">
                        <div class="text1">实验室传感器显示</div>
                        </div>
                    <div class="boxtop2">
                        <div class="text2">压力： {{ press }} MPa</div>

                    </div>
                </div>
            </div>
          <div class="righttall">
            <!-- <img src="src\assets\images\内压实验面板图.jpg"> -->
            <img src="../../../../assets/images/neiyamianban.jpg">
          </div>
          <div class="rightlow">
          <div class="bg1">
          <div class="bg1-box1">
            <button v-if="expStatus" class="my-button-disable" @click="startIp">开始试验</button>
            <button v-if="!expStatus" class="my-button" disabled>开始试验</button>
            <div class="box-p">开始试验后，等待现场人员操作，给容器加载到一定压力</div>
          </div>
          <div class="bg1-box1">


            <button v-if="expStatus" class="my-button2-disable" @click="downloadFile">下载随机实验数据</button>
            <button v-if="!expStatus" class="my-button2" disabled>下载随机实验数据</button>

            <div class="box-p">获取随机实验数据，完成实验报告</div>
        </div>
          </div>
          <div class="bg2">


          <div class="bg2-box3">
            <div class="box-p">
              加载到一定压力停止加压，进行应变测量，完毕后放压结束实验
            </div>
          </div>
        </div>
        </div>
        </div>
      </div>
    </div>
  </template>

  <style scoped>


.demonstration {
  /* color: var(--el-text-color-secondary); */
  color: black;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 250px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.plugin{
  width: 100%;
  height: 100%;
}
.page-vedio {
    height: 100%;
    width: 526px;
}
.flex-base-page {
    display: flex;
    flex-direction: column;
}
.flex-base {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: row;
}
.flex-title-first{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 10px;
}
.flex-title{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 20px;
  letter-spacing: 5px;
}
.flex-base-vedio {
    display: flex;
    /* justify-content: center;
    align-items: center; */
}
.first-vedio {
    width: 100%;
    height: 276px;
    margin-left:40px;
    margin-top: 10px;
}
.first-vedio-left {
    width: 450px;
    height: 276px;
}
.first-vedio-right{
  width: 66px;
  height: 235px;
  border: 1px solid #808080;
  margin-left:7px;
  margin-top:40px;
}
.pic1 {
    width: 100%;
    height: 302px;
    margin-top:20px;
}
.pic1-left {
  width: 430px;
  height: 312px;
  margin-left:40px;
  border: 1px solid #808080;
  background-image: url('/src/');
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic1-right {
  width: 72px;
  height: 220px;
}
.pic2 {
    width: 100%;
    height: 302px;
    margin-top:5px;
}
.pic2-left {
  width: 430px;
  height: 312px;
  margin-left:40px;
  border: 1px solid #808080;
  background-image: url('/src/');
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic2-right {
  width: 72px;
  height: 220px;
}
.image {
  width: 100%; /* 图像宽度与外层盒子宽度一致 */
  height: 100%; /* 图像高度与外层盒子高度一致 */
  object-fit: cover; /* 调整图像以填充整个图像框 */
}
  .page1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 922px;
  }

  .left-vedio {
    width: 526px;
    height: 922px;
  }

  .right-control {
    display: flex;
    flex-direction: column;
    width: 786px;
    height: 922px;

  }

  .box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 500px;
    height: 400px;
    text-align: center;
    padding: 20px;
    margin: 50px 0;
  }
  .righttop{
    width: 290px;
    height: 180px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative;
    top:10px;
    left: 100px;
  }
  .boxtop{
    display: flex;
    justify-content: center; /* 在主轴上居中对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
    width: 280px; /* 设置框的宽度 */
    height: 120px; /* 设置框的高度 */
    background-color: #fffefe; /* 设置框的背景颜色 */
    border-radius: 20px; /* 设置圆角半径 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
  }
  .boxtop1{
    display: flex;
    justify-content: center; /* 在主轴上居中对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
    width: 200px; /* 设置框的宽度 */
    height: 60px; /* 设置框的高度 */
  }
  .boxtop2{
    display: flex;
    justify-content: center; /* 在主轴上居中对齐 */
    align-items: center; /* 在交叉轴上居中对齐 */
    flex-direction: column;
    width: 280px; /* 设置框的宽度 */
    height: 60px; /* 设置框的高度 */
  }
  .text1{
    font-size: 18px; /* 设置字体大小 */
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
  }
  .text2{
    font-size: 24px; /* 设置字体大小 */
    font-family: Arial, sans-serif; /* 设置字体样式 */
    text-align: center;
  }

  .righttall{
    width: 780px;
    height: 400px;
    /* background-color: #0c39b3; */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative;
    top:10px;
  }
  .righttall img {
    width: auto;
    height: 400px; /* 保持图片纵横比，自动计算高度 */
    position: absolute;
    top: 0; /* 图片顶部与盒子顶部对齐 */
    right: 0; /* 图片右侧与盒子右侧对齐 */


}

  .rightlow
  {
    position: relative;
    top:10px;
    width: 750px;
    height: 320px;
    /* background-color: #b9b929; */
    padding: 20px;
    display: flex;
    position: relative;
    left:70px;
  }

  .bg1 {
    width: 340px;
    height: 300px;
    /* background-color: #2980b9; */
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  .bg1-box1{

    width: 250px;
    height: 120px;
    margin: 10px;
    border: 2px solid #a8a7a7;
    background-color: #ffffff;
    text-align: center;
    padding: 15px;
    display: flex;
    flex-direction: column;

  }

  .bg2{
    width: 350px;
    height: 300px;
    /* background-color: #8697a2; */
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .bg2-box3 {
    width: 250px;
    height: 120px;
    margin: 10px;
    border: 2px solid #a8a7a7;
    background-color: #ffffff;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .box-p {
    text-align: left;
    font-size: 16px; /* 设置字体大小 */
    font-weight: bold;

  }

  .my-button {
    padding: 10px 10px;
    background-color: #cbced0;
    color: #201f1f;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;

  }

  .my-button-disable {
    padding: 10px 10px;
    background-color: #7b7b7c;
    color: #201f1f;
    border: none;
    border-radius: 5px;
    font-size: 16px;

  }

  .my-button2 {
  padding: 10px 10px;
  background-color: #cbced0;
  color: #201f1f;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

}

  .my-button2-disable {
  padding: 10px 10px;
  background-color: #7b7b7c;
  color: #201f1f;
  border: none;
  border-radius: 5px;
  font-size: 16px;

}
  </style>
